<template>
	<view class="page-index page p-l-30 p-r-30 p-b-150">
		<searchHeader></searchHeader>
		<view class="banner mb-40">
			<swiper class="swiper" autoplay indicator-dots indicator-color="#fff" indicator-active-color="#8663E8">
				<swiper-item v-for="item in banners" :key="item.id">
					<view class="swiper-item ">
						<image :src="item.thumb_src" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="nav df wrap gray">
			<view class="nav-item df-cc column" v-for="item in nav" :key="item.id" @click="goRouter('/pages/goods/list',{flag:item.flag})">
				<image :src="item.icon" mode="" class="mb-10"></image>
				<view>{{item.name}}</view>
			</view>
		</view>
		
		<view class="block-title fsb df-ac margin-top-50">
			<view class="df-ac">
				<view class="fz36 fw-b gray">lanlanli甄选项目</view>
				<!-- <view class="tag">LIVE</view> -->
			</view>
			<view>
				<view class="fz24 more gray" @click="goRouter('/pages/goods/list')">更多</view>
			</view>
		</view>
		<view class="df live-container">
			<zhenxianItem v-for="item in list" :key="item.id" :good="item"></zhenxianItem>
		</view>
		<view class="block-title fsb df-ac margin-top-50">
			<view class="df-ac">
				<view class="fz36 fw-b gray">lanlanli精选活动</view>
				<!-- <view class="tag">HOT</view> -->
			</view>
			<view>
				<view class="fz24 more gray"  @click="goRouter('/pages/huodong/list',{from:'index'})">更多</view>
			</view>
		</view>
		
		<view class="faxian-item pr c-fff" >
			<image :src="huodong.thumb" mode="" class="faxian-bg" @click="goRouter('/pages/huodong/detail',{id:huodong.id})"></image>
				
			<view class="bottom">
				<view class="top fsb df-ac ">
					<view class="fz30 fw-b title">{{huodong.title}}</view>
				</view>
				<view class="top desc">
					<view class="fz22">地址：{{huodong.address}}</view>
				</view>
			</view>
		</view>
		
		<pageFooter ref="footer"></pageFooter>
	</view>
</template>

<script>
	import searchHeader from '../../components/searchHeader.vue'
	import zhenxianItem from '../../components/zhenxianItem.vue'
	import flashSaleCard from '../../components/flashSaleCard.vue'
	import goodItem from '../../components/goodItem.vue'
	//引入js
	import { goodsIndex}  from '../../utils/goods'
	import { getHomeBanner } from '@/api/banner'
	export default {
		components: {
			searchHeader,
			zhenxianItem,
			flashSaleCard,
			goodItem
		},
		data() {
			return {
				query: {
					"keyWord": "", // 模糊搜索，搜索的字段对应keyWordLikeFields
					"type": '', // 全等于筛选，对应fieldEq
					"page": 0, // 第几页
					"size": 10, // 每页返回个数
					"sort": "desc", // 排序方向
					"order": "id" // 排序字段
				},
				nav:[
					{id:1,flag:'hot',name:'爆款',icon:require('../../static/tabbar/nav_baokuan.png')},
					{id:2,flag:'new',name:'新品',icon:require('../../static/tabbar/nav_new.png')},
					{id:3,flag:'limit',name:'限量',icon:require('../../static/tabbar/nav_miaosha.png')},
					{id:4,flag:'hao',name:'好礼',icon:require('../../static/tabbar/nav_haoli.png')}
				],
				list:[
					// {id:1,title:'炸街保障，新品预览',click:'232',img:'../../static/goods/faxian1.png'},
					// {id:2,title:'炸街保障，新品预览',click:'5434',img:'../../static/goods/faxian2.png'},
					// {id:3,title:'炸街保障，新品预览',click:'3332',img:'../../static/goods/faxian3.png'},
					// {id:4,title:'炸街保障，新品预览',click:'6456',img:'https://z3.ax1x.com/2021/08/08/flFGtK.jpg'},
				],
				imgs:[
					{id:1,img:'https://z3.ax1x.com/2021/08/08/flF1Tx.jpg'},
					{id:2,img:'https://z3.ax1x.com/2021/08/08/f1ZdUA.jpg'},
					{id:3,img:'https://z3.ax1x.com/2021/08/08/f1ZaEd.jpg'},
					{id:4,img:'https://z3.ax1x.com/2021/08/08/f1Zw4I.jpg'},
					{id:5,img:'https://z3.ax1x.com/2021/08/08/flFwnA.jpg'},
				],
				imgs2:[
					{id:1,img:'https://z3.ax1x.com/2021/08/08/flmLin.jpg'},
					{id:2,img:'https://z3.ax1x.com/2021/08/08/flmzsU.jpg'},
					{id:3,img:'https://z3.ax1x.com/2021/08/08/flmjzV.jpg'},
					{id:4,img:'https://z3.ax1x.com/2021/08/08/flmXR0.jpg'},
					{id:5,img:'https://z3.ax1x.com/2021/08/08/flmxMT.jpg'},
					{id:6,img:'https://z3.ax1x.com/2021/08/08/flnSLF.jpg'},
					{id:7,img:'https://z3.ax1x.com/2021/08/08/fln9Z4.jpg'},
				],
				banners:[
					// {id:1,thumb_src:'../../static/goods/faxian1.png'},
					// {id:2,thumb_src:'../../static/goods/faxian2.png'},
					// {id:3,thumb_src:'../../static/goods/faxian3.png'},
				],
				huodong:{
					id:1,
					title:"复合知觉 - 意识与符号的交叉感知",
					desc:"我们很高兴能够向您推荐这场展览，为您推荐全新的医美体院",
					img:'https://z3.ax1x.com/2021/08/08/flmjzV.jpg',
					},
				
				page:1
			}
		},
		onShow() {
			if(this.$refs.footer) {
				this.$refs.footer.cur =1
			}
		},
		created() {
			this.init()
		},
		onReachBottom() {
			console.log('bottom')
		},
		methods: {
			async init() {
				 let res = await this.$api.getHomeBanner(this.query).then(res=> {
					 console.log("轮播图")
				 		console.log(res)
						this.banners = res.data.adv_index_banner;
				 }).catch(err=> { console.log(err) }
				 );
				 //甄选商品
				 let recGoods = await this.$api.recGoodsList(this.query).then(res=> {
				 		console.log("甄选商品")
				 		console.log(res)
				 		this.list = res.data;
				 }).catch(err=> { console.log(err) }
				 );
				 //甄选活动
				 let recActivity = await this.$api.recActivityList(this.query).then(res=> {
				 		console.log("甄选活动")
				 		console.log(res)
				 		this.huodong = res.data;
				 }).catch(err=> { console.log(err) }
				 );
				 // getHomeBanner().then(res=> {
				 // 		console.log(res)
				 // }).catch(err=> { console.log(err) })
				 
				 // this.$http.goodsIndex().then(res=>{
				 // 	if(res.status){
				 // 		this.result = [];
				 // 		this.images = res.data.banner;
				 // 		this.category = res.data.nav;
				 // 		this.img_1 = res.data.img_1;
				 // 		this.img_2 = res.data.img_2;
				 // 		this.hot = res.data.hot;
				 // 		this.recommend = res.data.recommend;
				 // 		this.notice = res.data.notice;
				 // 		this.isLoading = false;
				 // 		this.isError = false;
				 // 	}else{
				 // 		this.isLoading = false;
				 // 		this.isError = true;
				 // 	}
				 //  }).catch(err=>{
				 // 	 this.isLoading = false;
				 // 	 this.isError = true;
				 //  }); 
				 
			},
			
		}
	}
</script>
<style lang="scss">
.faxian-item {
	// width: 100%;
	// width: 335px;
	// border-radius: 20rpx;
	margin-bottom: 150rpx;
	// overflow: hidden;
	position: relative;
	//background-image: linear-gradient(to bottom ,rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 20%, transparent 30%,rgba(0,0,0,.1) 80%, rgba(0,0,0,.5) 100% );
	.faxian-bg {
		width: 100%;
		height: 300rpx;
		//border-radius: 20rpx;
		position: relative;
	}
	.top {
		width: 100%;
		//position: absolute;
		top: 30rpx;
		.view {
			border-radius: 20rpx;
			background-color: rgba(0,0,0,.3);
		
			font-size: 22rpx;
			color: #fff;
			padding-right: 20rpx;
			.view-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}
	}
	.bottom {
		//position: absolute;
		left: 30rpx;
		right: 30rpx;
		font-weight: bold;
		color: #999;
		// width: 100%;
		.desc{
			//margin-top: 80rpx;
		}
		.user {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}
		.like {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 0;
		}
	}
	.tip {
		width: 145rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background-color: #FE5634;
		font-size: 22rpx;
		border-radius: 24rpx;
		position: absolute;
		right: 0;
		&.cancel {
			background-color: rgba(40,42,50,0.68);
		}
	}
}
</style>
<style lang="scss">
	.page-index {
		.swiper {
			height: 320rpx;
			
			.swiper-item {
				height: 350rpx;
				//border-radius: 30rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 350rpx;
				}
			}
		}
		.nav {
			border-bottom: solid 1px #e5e5e5;
			.nav-item {
				text-align: center;
				font-size: 22rpx;
				flex: 0 0 25%;
				margin-bottom: 30rpx;
				image {
					width: 76rpx;
					height: 76rpx;
				}
			}
		}
		.block-title {
			color: #282A32;
			margin-bottom: 40rpx;
			.tag {
				width: 80rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				background-color: #8663E8;
				color: #fff;
				font-size: 26rpx;
				text-align: center;
				margin-left: 15rpx;
			}
			.more {
				padding-right: 30rpx;
				position: relative;
				&::after {
					content: '';
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 0;
					height: 0;
					border-left: 14rpx solid #282A32;
					border-top: 10rpx solid transparent;
					border-bottom: 10rpx solid transparent;
				}
			}
		}
		.live-container {
			overflow-y: scroll;
			padding-bottom: 20rpx;
			border-bottom:solid 1px #e5e5e5;
		}
	}
</style>
